<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width">

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
  <link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
  <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="assets/css/style.css">

  <title>SingPass Mobile (TEST) Begin Screen</title>
</head>

<body style="background-color:#ECE8E8;">

  <div id="main-phone">
    <img src="assets/images/spm-choose-blue.jpg" style="width:100%;">
    <span class="choose-text text-center">SingPass Mobile Screens for SG-Verify flow</span>
    <div class="container">
      <div class="row" style="top:30%;">
        <div class="phone-instructions">
          <h3 class="mb-4 mt-4">Select Persona</h3>
        </div>
        <div class="select-wrapper col-sm-12 mt-2">
          <i class="fa fa-angle-down"></i>

          <select id="persona" class="form-control" name="persona" required="">
              <option value="" disabled="">- Select Persona -</option>
          </select>
        </div>

        <button class="btn bottom-btn text-center" onclick="proceed()">
            Proceed to SingPass Mobile (TEST) App
        </button>

      </div>
    </div>
  </div>

  <script src='assets/js/custom.js'></script>
  <script type="text/javascript" src="assets/vendor/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="assets/vendor/jquery-ui/js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="assets/vendor/jquery-ui-sliderbutton/js/jquery.ui.sliderbutton.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>

  <script>
  var select = document.getElementById("persona");
  var persona;

  var selectedUinfin = "";

  $.ajax({
      url: "/getPersona",
      type: "GET",
      success: function(data) {
        persona = data;

        for(var i = 0; i < persona.length; i++){
          var option = document.createElement("option");
          option.text = persona[i].uinfin + " - " + persona[i].name;
          option.value = persona[i].uinfin;
          select.appendChild(option);
        }
      },
      dataType: "json",
      timeout: 5000
  });

  function proceed(){
    var uinfin = document.getElementById("persona").value;
    window.location = "spm-home?uinfin="+uinfin;
  }

  </script>
</body>

</html>
